import React, { useState, useEffect } from 'react';

import { Row, Col, Collapse, Button, Tag } from 'antd';
import { Carousel, Tabs, WhiteSpace, Grid } from 'antd-mobile';
import { connect, history } from 'umi';
import styles from './index.less';
import IconFont from '@/components/IconFont';
import PublicList from '@/components/PublicList';
import { customer, store } from '@/services/factory';

const data = [
  {
    icon: (
      <div className="center" style={{ height: 40, width: 40 }}>
        <IconFont
          type="icon-Invoice_fill"
          style={{ fontSize: 22, color: '#44cef6' }}
        />
      </div>
    ),
    text: <span style={{ color: '#44cef6' }}>开票服务</span>,
    path: '/invoice',
  },
  {
    icon: (
      <div className="center" style={{ height: 40, width: 40 }}>
        <IconFont
          type="icon-ziliao"
          style={{ fontSize: 22, color: '#4b5cc4' }}
        />
      </div>
    ),
    text: <span style={{ color: '#4b5cc4' }}>基础资料</span>,
    path: '/basedata',
  },
  {
    icon: (
      <div className="center" style={{ height: 40, width: 40 }}>
        <IconFont type="icon-fill" style={{ fontSize: 22, color: '#1a91ff' }} />
      </div>
    ),
    text: <span style={{ color: '#1a91ff' }}>凭证接收</span>,
    path: '/voucher',
  },
  {
    icon: (
      <div className="center" style={{ height: 40, width: 40 }}>
        <IconFont type="icon-jj" style={{ fontSize: 22, color: '#4c8dae' }} />
      </div>
    ),
    text: <span style={{ color: '#4c8dae' }}>资料交接</span>,
    path: '/resource',
  },
  {
    icon: (
      <div className="center" style={{ height: 40, width: 40 }}>
        <IconFont
          type="icon-zaitu"
          style={{ fontSize: 22, color: '#758a99' }}
        />
      </div>
    ),
    text: <span style={{ color: '#758a99' }}>申报查询</span>,
    path: '/taxbcnotice',
  },
  {
    icon: (
      <div className="center" style={{ height: 40, width: 40 }}>
        <IconFont type="icon-da" style={{ fontSize: 22, color: '#725e82' }} />
      </div>
    ),
    text: <span style={{ color: '#725e82' }}>公司档案</span>,
    path: '/accountbook',
  },
  {
    icon: (
      <div className="center" style={{ height: 40, width: 40 }}>
        <IconFont type="icon-zhangdan" style={{ fontSize: 22 }} />
      </div>
    ),
    text: <span style={{ color: '' }}>企业账单</span>,
    path: '/paymentorder',
  },
  {
    icon: (
      <div className="center" style={{ height: 40, width: 40 }}>
        <IconFont type="icon-chat" style={{ fontSize: 40 }} />
      </div>
    ),
    text: <span style={{ color: '' }}>在线沟通</span>,
    path: '/chat',
  },
];

let service = (props) => {
  return (
    <div style={{ height: '100%' }}>
      <img
        src={require('@/assets/poster.png')}
        alt=""
        style={{ width: '100%', marginBottom: 16 }}
      />
      <Grid
        data={data}
        activeStyle={false}
        columnNum={3}
        onClick={(dataItem) => {
          history.push(dataItem.path);
        }}
      />
    </div>
  );
};

export default service;
